<template>
  <div class="index">
    <div class="n">{{timestampToTime.Y}}</div>
    <samp>年</samp>
    <div class="y">{{timestampToTime.M}}</div>
    <samp>月</samp>
    <div class="r">{{timestampToTime.D}}</div>
    <samp>日</samp>
    <div class="t">{{timestampToTime.time}}</div>
    <div class="but">退出登陆</div>
  </div>
</template>

<script>
export default {
  name: 'my-time',
  data () {
    return {
      timestampToTime: {}
    }
  },

  mounted () {
    this.timestampToTimes()
    setInterval(() => {
      this.timestampToTimes()
    }, 1000)
  },
  methods: {
    timestampToTimes () {
      const date = new Date()// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear()
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      const D = date.getDate()
      const h = date.getHours() >= 10 ? date.getHours() + ':' : '0' + date.getHours() + ':'
      const m = date.getMinutes() >= 10 ? date.getMinutes() + ':' : '0' + date.getMinutes() + ':'
      const s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()
      this.timestampToTime = { Y: Y, M: M, D: D, time: h + m + s }
    }
  }
}
</script>

<style lang="less" scoped>
.index {
  display: flex;
  width: 100%;
  height: 100%;
  .n {
    width: 91px;
    height: 54px;
    font-size: 25px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    text-align: center;
    line-height: 54px;
    color: #ffffff;
    background: url("../assets/矩形\ 19\ 拷贝\ 4\ \(1\).png") no-repeat  center center;
  }
  samp{
    font-size: 25px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    text-align: center;
    line-height: 54px;
    color: #ffffff;
  }
  .y,.r{
    width: 56px;
    height: 54px;
    font-size: 25px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    text-align: center;
    line-height: 54px;
    color: #ffffff;
    background: url("../assets/矩形\ 19\ 拷贝\ 3.png") no-repeat  center center;
  }
  .t{
    margin-left: 22px;
    width: 147px;
    height: 54px;
    font-size: 25px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    text-align: center;
    line-height: 54px;
    color: #ffffff;
    background: url("../assets/矩形\ 19\ 拷贝.png") no-repeat  center center;
  }
  .but{
    margin-left: 5px;
    width: 147px;
    height: 54px;
    font-size: 25px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    text-align: center;
    line-height: 54px;
    color: #ffffff;
    background: url("../assets/矩形\ 19\ 拷贝.png") no-repeat  center center;
    cursor: pointer;
  }
}
</style>
